Introduction to Internet and HTML(201) 


Unit 4: HTML and Structure of Webpage 


What is HTML? 

m HTML stands for HyperText Markup Language. 

Em It is used to design web pages using a markup language. 

= We can create static websites by HTML only. 

= |t is the combination of Hypertext and Markup language. Hypertext 
between the web pages. 









= 


m A markup language is used to define the text document 
structure of web pages. This language is used to annotate (ma 


text so that a machine can understand it and manipu t 
languages (e.g. HTML) are human-readable. 
E The language uses tags to define what has to be done on the text. 
= HTML was created by Tim Berners-Lee in 1994. irst-ever 
d 


1.0, but the first standard version was HTML 2.0 Neo : 1999. 


r mputer) 
arkup 








n of HTML was HTML 










HTML1 HTML3 => HTML4 = HTML5 






Elements and 








(Tags)*are the building blocks of HTML pages. 

Mes of content such as "heading", "paragraph", "table", and so on 
display the HTML tags, but use them to render the content of the page 
redefined tags and elements which tell the browser how to properly display 
the content. Remember to include closing tags. If omitted, the browser applies the effect of 


the opening tag until the end of the page. 


Features of HTML 
= Html is a static page. 
= Html is not a case sensitive. 
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= Html is a error free language. 


= It provides facilities to add audio, video, image on web pages. 

= Each and every elements of html should be enclosed within the angular brackets (<>). 

= Html programs are executed by the interpreter of the browser software. 

= Html program save with .htm or .html extension. 

= It is avery easy and simple language. It can be easily understood and modified. 

= It is very easy to make effective presentation with HTML because it has a lot of formatting 
tags. 

= It is amarkup language so it provides a flexible way to design web pages along with the 
text. 

= It facilitates programmers to addlinkon the web pages (by html anchon tag)’, so it 
enhances the interest of browsing of the user. 

= — It is platform-independent because it can be displayed on any platform like'Windows, Linux 
and Macintosh etc. 

= |t facilitates the programmer to add Graphics, Videos; and Sound tothe web pages which 
makes it more attractive and interactive. 


HTML Rules 


= HTML documents are structured documents ` 

o It defines what elements a,document*cahecontain, their possible relationship to 
one another within a.documents, and possible attributes and values. If the 
elements ing actuahhtml document agree within this definition, the document, 
is said to be valid. 

= Elements names are notjcase sensitive. 

o An element like <html> or <HTML> or <Html> is equivalent. 

= Attributes names arènot case sensitive. 
= Attributes value may be'case)sensitive. 

Ow, The value of an attribute may be case sensitive, if it refers to a file, the filename 
in. <IMG Src="filename.gif"> may not be same as the file name in <IMG 
Src="FILENAME.gif">, it depends on the operating system. 

=" Elements names cannot contain spaces. 

= Attribute values may contain spaces if the values is enclosed by quotes. 
=" Browser collapse and ignores White space characters in html content 

= Html document may contain comments. 

o Comments are denoted by a start value of <!-- and an end value of -->comments 
can be many line long, there is no space between the dashes or exclamation in 
the comment. 

= An element that encloses the start tag of another element must also enclose its end tag, 
if exists. 

o For Example, use <B> <I> correct </I></B> and 
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o <B> <l> Not correct </B></I> 


= Follow the rule “Tag that opens first, closes last”. 
= Browser ignores unknown elements. 
= Browser ignores unknown attributes. 


Basic structure of an HTML document 
= An HTML document has two main parts: 


o <head>: The head element contains title and meta data of a web document. 
o <Body>: The body element contains the information that you wees ev on 
a web page. r Pia 
5 4, 
Head of an HTML Document 


= Information placed within this section is only for the inner orki prof thesdocument. The 






page. 
= Within <head> </head>,<title> tag will be there. Théstextwrittenewithin <title> </title> 


tags, will be displayed on the title bar of the web pager 










<html> tag indicates that this 
web page is written in HTML. 









<title> tag contains the web 
page title. 


<title>Title of the 


| <head> 
| web page</title> 











</head> 


<head> tag contains 
information about the web. 








. \ <body> 7} <body> tag contains the 
; `~ Content of the page. f content of the web page. 
. </body> x 







</htmP marks the end of 
the web page. 








</html> 





Body of an HTML Document 


= The body used for text and tags that are shown directly on the page. The information 
written within this tag, will be displayed on the browser window. 
= The tags used to indicate the start and end of the main body of textual information are: 
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Syntax: 
<body> 
Should appear after the </head> definition. 
</body> 
= we can also specify the text color, background color or background image for the entire 
page within the <body> tag. 
= finally, all web pages have an <html> tag at the beginning and end, telling the browser 
where the document starts and where it stops. 


= The general syntax is as follow: 


<html> 
<head> 
<title>Any text </title> 
</head> 
<body> 
Main content will be written here. 
</body> 
</html> 
Example: 
<html> 
<head> 
<title>My Web Page </title> 
</head> 
<body> 
This is my first web page. The actual content are written in this 
section. </body> 
</html> 
HTML Tags 


= Tags contain elements which provide instructions for how information will be processed or 
displayed. There.are bothstarternttags <TAG> and end tags </TAG> 
= Tags are opened and endiclosed in (< >)angular brackets. 
= There are two types of tags 
Ox, Gontainer tag/paired tag 
o Non-eontainer/Empty tag/Singular tag 


1. Container tag/paired tag 
= Html tags used to be enclosed within angular brackets. Anything Witten without using 


angular brackets is interpreted as text. 
= "Tags" that are needed to be closed are called container tags. 
= It is also Known as paired tag. 
= |t means that any tag of the form <tag>....</tag>is container tag. 


Example: 
<body>... </body> 
<P </p> 
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<head>......... </head> 
<title> <title> 
<html </html> 


2. Non-container/Empty tag/Singular tag 
= The tags that do not need closing tag are called empty tag. They do not contained any 


things. They are also called as container tag or singular tag. 


Example: 
<hr> 
<br> 
<img> 


HTML Elements 
= An HTML element usually consists of a start tag and end tag, With, the ‘content inserted in 
between: 
<tagname>Content goes here...</tagname> 
= The HTML element is everything from the start, tag t@theend tag 
<p>My first paragraph.</p> 
= The <html> element defines the whole documents 
= It has a start tag <html> and an end tag </html>. 
= The element content is another HTMkelement (the <body> element). 
= Some html elements have empty,tag. Empty elements are closed in the start tag 
= Most html elements can have attributes. 


Nested HTML Elements 
= HTML elements can be nested (this means that elements can contain other elements). 


= All HTML docUmentsconsistof nested HTML elements. 
= The following’example contains four HTML elements (<html>, <body>, <h1> and <p>): 


Example: 
<html> 
<body> > 
<h1>MyFirstHeading</h1> 
<p>Myfirstparagraph.</p> 
</body> 
</html> 


HTML Attributes 

= HTML attributes are special words which provide additional information about the 
elements or attributes are the modifier of the HTML element. 

= Each element or tag can have attributes, which defines the behaviour of that element. 

= Attributes should always be applied with start tag. 
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= The Attribute should always be applied with its name and value pair. i.e. name="value" and 


separated by an equals (=) sign. 


o Attribute values always be enclosed in double/single quotes. 
o Double quotes are the most common use, but single quotes are also allowed. 


= The Attributes name and values are case sensitive, and it should be written in Lowercase 


only. 


= You can add multiple attributes in one HTML element, but need to give space between two 


attributes. 


Syntax: 


<element attribute_name="value">content</element> 


= Some of the more common attributes are: 









































Tag Value Description 
Alt Text Specifies an alternate textfor animage 
Href URL Specifies the URL of the pagesthe)link goes to 
Src URL Specifies theURL of an image 
Width Pixels Specifies thewidth of tables, images, or table cells. 
Height Pixels Specifies the widthof tables, images, or table cells. 
Style style Attributes CSS code specifies inline the HTML element is 
presented: 
Title Title_Description Displayonthe™tooltip" for your elements. 
Id ID_Name Declared unique id for the element. 
. HTML Paragraph tag <p>.....</p> 


= The <p> tag defines‘apatragraph. 


= Browsers automaticallyvadd.some space (margin) before and after each <p> element 


= The paragraph tags aretused to define a block of text as a paragraph. 


= The HBIML <p> tag also'supports following additional attributes: 























Attribute Value Description 

Id Id Specifies a unique id for an element 

class Classname | Specifies one or more class names for an element (refers to a class in a style 

sheet) 

Title Any text Specifies extra information about an element 

Style Style Specifies an inline CSS style for an element 
attribute 

Align left Specifies text alignment within a paragraph. 
right 
center 
justify 
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Example: 


<html> 

<body> 

<p>This paragraph contains a lot of lines in the source code, but the 
browser ignores it. </p> 

<p align="right" >This is some text in a paragraph.</p> 

</body> 

</html> 


. HTML Heading tag<h1> to <h6> 
= There are 6 levels of html headings (h1 through h6). 


= The HTML <h1> to <h6> tag are used to define headings in an HTML document .They have 
their own styles. Headings are always display as bold text, You ĉan Use ‘different sizes for 
your headings. HTML also has six levels of headings, which Use the elements <h1>, <h2>, 
<h3>, <h4>, <h5>, and <h6>. While displaying*any heading, browser adds one line before 
and one line after that heading. 

= <h1> defines largest heading and <h6> defines*smallest heading. 









































Attribute Value Description 
Id Id Specifies unique id for an element 
class Class name Specifies*one. or more class names for an element 
(sefers to a class in a style sheet) 
Title Any text Specifies extra information about an element 
Style Style attribute Specifies an inline CSS style for an element 
Align Left, — right,’ center | Specifies text alignment within a heading. 
justify 

Example: 

<html> 

<body> 


<h1 align="center" >This is heading | This is heading 1 
1</h1> 
<h2>This is heading 2</h2> 


<h3>This is heading 3</h3> This is heading 2 
<h4>This is heading 4</h4> 

<h5>This is heading 5</h5> This is heading 3 
<h6>This is heading 6</h6> K À 

</body> This is heading 4 
</html> This is heading 5 





This is heading 6 
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= The <br> tag inserts a single line break. 


= The <br> tag is an empty tag which means that it has no end tag. 


= Use the <br> tag to enter line breaks, not to separate paragraphs. 
































Attribute Value Description 
Id Id Specifies a unique id for an element 
class Class name Specifies one or more class names for an element (refers 
to a class in a style sheet) 
Title Any text Specifies extra information aboutan element 
Style Style definition Specifies an inline CSS style for an element 
Example: 
<html> 
<body> 
<p>To break lines<br>in a text,<br>use the br element. </p> 
</body> 
</html> 


4. HTML anchor <a> Tag 


= The <a> tag defines a hyperlink, whichis usSed“to link from one page to another. 
= The most important attribute of*the <a> èlementis the href attribute, which indicates the 


link's destination. 


= By default, links will appeðņas fòllowSin_all browsers: 


= An unvisited link isunderliħediand blue 


= A visited link is underlinedvand purple 


= An active link is underlined andred 


= If the <a> tag has no href attribute, it is only a placeholder for a hyperlink. 


= A linked\page is Normally displayed in the current browser window, unless you specify 


another target. 





Attribute Value 


Description 














Id Id Specifies a unique id for an element 

Class Class name Specifies one or more class names for an element (refers to a 
class in a style sheet) 

Title Any text Specifies extra information about an element 

Style Style definition Specifies an inline CSS style for an element 





download filename 


Specifies that the target will be downloaded when a user clicks 
on the hyperlink 

















Href URL Specifies the URL of the page the link goes to 
Target _blank, parent Specifies where to open the linked document 
_self, top 
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<body> 
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<p>Click on <a href="https://www.google.com/" target="_blank"> Google </a>to go on home page of G 
oogle.</p> </body> 


</html> 


. HTML <img> Tag (Displaying images in html 
= HTML <img> tag is insert image into a web document. 


= HTML image path define/declare inside <img> tag. 


= The <img> tag is empty tag, that mean's no closing tag. 


=" <img> tag have some attributes are use for display image on web page. 


= The src attribute, src stands for "source", that is path of image ARL: 


= Alt Attribute used to define an "alternate text" for am image. This\specifies text to be 


identified in the image name. 


= Width and Height specifies the size of image to display On webpage 
























































Attribute | Value Description 
Id Id Specifies a unique id for ah element 
class Class name Specifies one*or more class*mames for an element (refers to a 
class in a styletsheet) 
Title Any text Specifies extra information about an element 
Style Style attribute Specifies an inlite CSS style for an element 
align Top, bottom, Specifies, they alignment of an image according to surrounding 
middle, left,right |‘elements 
alt text Specifies an alternate text for an image 
border pixels Specifies the width of the border around an image 
height pixels Specifies the height of an image 
width pixels Specifies the width of an image 
hspace pixels Specifies the whitespace on left and right side of an image 
vspace pixels Specifies the whitespace on top and bottom of an image 
src URL Specifies the URL of an image 
usemap | #mapname Specifies an image as a client-side image-map 
Example: 
<html> 
<body> 
<img src="smiley.gif" alt="Smiley face" width="42" height="42"> 
</body> 
</html> 


Images and Anchors(creating image as a link) 
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= Anchor elements can enclose text or images. When an anchor encloses an image, the 


image becomes hot. A hot image can active the link. This is known as hot spot. Normally 
browser shows an image to be part of an anchor by putting a colored around the image. 


Example: 


<html> 
<body> 
<a href="home.html> 
<img src="smiley.gif" alt="Smiley face" width="42" height="42"> 
</a> 
</body> 
</html> 


. Text level formatting /Text level elements 


= HTML provides us with the ability for formatting text ust likèwe do it in MS Word or any 
text editing software. 


<b> tag 

= HTML bold tag is represented by <b> tag. À 

= HTML <b> tag is used to display the written text in bold format. It is strictly a presentational 
element. 

= |f you want to show your text,in bold letters*and not have real semantic meaning, then put 
it within <b>....... </b> tagr 

= The HTML <font> elements foundwithin the <body> tag. 





























Attribute | Value Description 
Id Id Specifies a unique id for an element 
class Glass name Specifies one or more class names for an element (refers to a class 
in a style sheet) 
Title Any text Specifies extra information about an element 
Style Style definition | Specifies an inline CSS style for an element 
Example: 
<html> 
<body> 
<p>This is normal text - <b>and this is bold text</b>.</p> 
</body> 
</html> 
Output: 


This is normal text - and this is bold text. 
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<i> tag 
= The <i> tag defines a part of text in an alternate voice or mood. The content inside is 
typically displayed in italics. 
= The <i> tag is often used to indicate a technical term, a phrase from another language, a 
thought, a ship name, etc. 


Example: 
<html> 
<body> 
<p>This is normal text - <i>and this is Italics text</i>.</p> 
</body> 
</html> 
Output: 


This is normal text - and this is Italics text. 


<strong> tag 
= The <strong> tag is used to define text with, strong.importanéeé. The content inside is 
typically displayed in bold. 


<html> 

<body> 

<p>This text is normal.</p> 

<p><strong>This text is important! </strong></p> 
</body> 

</html> 


Output: 


This text is normal. 


This text is important! 


<em>tag 

= The <em> tag isuSed to define emphasized text. The content inside is typically displayed in 
italic. 

=  Ascreé@n,reader will pronounce the words in <em> with an emphasis, using verbal stress. 


<html> 

<body> 

<hi>The em element</h1> 

<p>You <em>have</em> to hurry up!</p> 
<p>We <em>cannot</em?> live like this.</p> 
</body> 

</html> 
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Output: 


The em element 


You have to hurry up! 


We cannot live like this. 


<mark> tag 
= The <mark> tag in HTML is used to define the marked text. It is used to highlightthe part of 
the text in a paragraph. The <mark> tag is new in HTML 5. 


<!DOCTYPE html> 
<html> 
<body> 
<h1>HTML mark Tag</h1> 
<p> 
<mark> C. B. Patel College </mark> It is a 
<mark>college for B.C.A</mark> for students in VNSGU. 
</p> 
</body></htmI> 


Output: 


HTML mark Tag 
C. B. Patel College It is a college for B-C_A for students in VNSGU. 


<sub> 

= The<sub> tag defines subscript text. 

= Subscript text appears, half a character below the normal line, and is sometimes rendered 
in a smallernfont. 

=" Subscript text éan be used for chemical formulas, like H20. 


<sup> tag 

= The <sup> tag defines superscript text. 

= Superscript text appears half a character above the normal line, and is sometimes rendered 
in a smaller font. 

= Superscript text can be used for footnotes, like WWW mi 


<!DOCTYPE html> 
<html> 
<body> 
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<h1>The sub and sup elements</h1> 
<p>This text contains H<sub>2</sub>O (Subscript) text.</p> 
<p>This text contains A<sup>2</sup> + B<sup>2</sup> (Superscript) text.</p> 
</body> 
</html> 
Output: 


The sub and sup elements 


This text contains H2O (Subscript) text. 


This text contains A? + B? ( Superscript) text. 


<big> tag 

= The <big> tag defines bigger text 

= The HTML <big> element is found within the <body> tag 

= The <big> tag is used to make the text one size bigger(i.e.: from Small to medium, medium 
to large, large to x-large). 

= The <big> tag cannot make the text larger thân, the browser's maximum font size. 

= The HTML <big> tag increases the font size. N © 4 N \ ~N 

A 

<small> tag N 

= The HTML <small> tag makes text one fontsiz@smaller in the HTML document. This tag is 
also commonly referredto as the <Small> element. 


= The HTML <small> tag decreases the font size. 


Example: 
<html> 
<body> 
<p>This text is normal.</p> 
<p><small>This text is smaller.</small></p> 
<p><big>This text is bigger.</big></p> 
</body> 
</html> 


Output: 


This text is normal. 


This text is smaller. 


This text is bigger. 
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<del> tag 
= The <del> tag in HTML stands for delete and is used to mark a portion of text which has 
been deleted from the document. 
= The deleted text is rendered as strike-through text by the web browsers. 
= The <del> tag requires a starting and ending tag. 


<ins> tag 

= The <ins> tag in HTML is used to specify a block of inserted text. 

= The <ins> tag is typically used to mark a range of text that has been.added to the 
document. > 

= The inserted text is rendered as underlined text by the web browserss 

= The <ins> tag requires a starting and ending tag. 


<!DOCTYPE html> 


<html> 
<body> 
<h2>HTML ins Tag</h2> 
<p> 
C.B. Patel Computer College is a <del>B.C.A college</del> 
<ins>for Computers</ins> 
</p> 
</body> 
</html> 
~~ ee 
Output: \ ~N b N 
HTML del Tag & Ins Tag 


C.B. Patel Computer College isB-C college for Computers 
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